<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content</title>

    <style type="text/css">
        .flex-container {
            display: flex;
            width: 80vw;
            height: 60vh;
            border: 1px solid blue;
            margin: 25px auto;
            /* flex-direction : column ; 和 flex-wrap : wrap ;*/
            flex-flow: column wrap;
            justify-content: flex-start;
        }
        
        .first {
            align-content: flex-start;
        }
        
        .second {
            align-content: center;
        }
        
        .third {
            align-content: flex-end;
        }
        
        .fourth {
            align-content: space-between;
        }
        
        .fifth {
            align-content: space-around;
        }
        
        .sixth {
            /* 在不设置 Flex项目 宽度时 会拉伸项目宽度 (若水平方向是交叉轴的话)*/
            align-content: stretch;
        }
        /* 以下是 Flex项目 的样式 */
        
        .flex-item {
            /* 如果这里设置了 Flex项目 的宽度 
               则在 Flex容器 中使用 align-content: stretch 看不到拉伸效果 */
            height: 30%;
            text-align: center;
            font-size: 30px;
        }
        
        .flex-item:nth-child(odd) {
            background: #6666fa;
        }
        
        .flex-item:nth-child(even) {
            background: #fa6666;
        }
    </style>

</head>

<body>

    <div class="flex-container first">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

    <div class="flex-container second">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

    <div class="flex-container third">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>


    <div class="flex-container fourth">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>


    <div class="flex-container fifth">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>


    <div class="flex-container sixth">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

</body>

</html>